@import 'mixins';

.mk-btn {
  position: relative;
  display: inline-block;
  color: $body-color;
  font-weight: $btn-font-weight;
  line-height: $btn-line-height;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  background-image: none;
  border: $btn-border-width solid transparent;
  box-shadow: $btn-box-shadow;
  cursor: pointer;
  transition: $btn-transition;
  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $border-radius);
  &.disabled, &[disabled] {
    box-shadow: none;
    cursor: not-allowed;
    opacity: $btn-disabled-opacity;
    > * {
      pointer-events: none;
    }
  }
}
// type
.mk-btn-default {
  @include button-style($white, $gray-400, $body-color, $white, $primary, $primary);
}

.mk-btn-primary {
  @include button-style($primary, $primary, $white);
}

.mk-btn-info {
  @include button-style($info, $info, $white);
}

.mk-btn-warning {
  @include button-style($warning, $warning, $white);
}

.mk-btn-danger {
  @include button-style($danger, $danger, $white);
}

.mk-btn-text {
  @include button-style(transparent, transparent, $body-color);
  box-shadow: none;
}

.mk-btn-dashed {
  @include button-style($white, $gray-400, $body-color, $white, $primary, $primary);
  border-style: dotted;
}

.mk-btn-link {
  color: $btn-link-color;
  font-weight: $font-weight-normal;
  text-decoration: $link-decoration;
  background-color: transparent;
  box-shadow: none;
  &:hover {
    color: $btn-link-hover-color;
    text-decoration: $link-hover-decoration;
  }
  &:focus, &.focus {
    text-decoration: $link-hover-decoration;
    box-shadow: none;
  }
  &:disabled, &.disabled {
    color: $btn-link-disabled-color;
    pointer-events: none;
  }
}

// size
.mk-btn-lg {
  @include button-size(
    $btn-padding-y-lg,
    $btn-padding-x-lg,
    $btn-font-size-lg,
    $btn-border-radius-lg
  );
}

.mk-btn-md {
  @include button-size(
    $btn-padding-y-md,
    $btn-padding-x-md,
    $btn-font-size-md,
    $btn-border-radius-md
  );
}

.mk-btn-sm {
  @include button-size(
    $btn-padding-y-sm,
    $btn-padding-x-sm,
    $btn-font-size-sm,
    $btn-border-radius-sm
  );
}

// shape
.mk-btn-circle {
  min-width: 32px;
  padding-right: 0;
  padding-left: 0;
  text-align: center;
  border-radius: 50%;
}

.mk-btn-round {
  border-radius: 30%;
}

// block
.mk-btn-block {
  width: 100%;
}

// icon
// .mk-btn-icon-only {
//   width: 32px;
//   height: 32px;
//   padding: 2.4px 0;
//   font-size: 16px;
//   border-radius: 2px;
// }

// .mk-btn > .anticon + span,
// .mk-btn > span + .anticon {
//   margin-left: 8px;
// }
